<template>
  <div>
    <div>
      <a-row>
        <a-col :span="12">
          <a-input-search :placeholder="$t('m.eform.formDesign.label.qing-shu-ru-ying-yong-ming-cheng-cha-xun')" enter-button @search="searchByName" />
        </a-col>
        <a-col :span="12">

        </a-col>
      </a-row>
      <br>
      <div>
        <div class="process_list_title" @click="changeHide">
          <h4>{{ $t('m.eform.formDesign.label.chang-yong-ying-yong-thiscustomapplistlength', [this.customAppList.length]) }}</h4><ych-icon v-show="!showCustom" type="caret-down" /><ych-icon v-show="showCustom" type="caret-up" />
        </div>
        <ActAppPortalCardList v-show="showCustom" :appList="this.customAppList" :custom="'1'" :ref="customAppList" @toDetail="toDetail" @refresh="refresh"></ActAppPortalCardList>
      </div>
      <div v-for="tab in groupCategory">
        <div class="process_list_title" @click="changeGroupHide(tab)">
          <h4>{{tab.groupName+'('+tab.children.length+')'}}</h4><ych-icon v-show="tab.isShow!='1'" type="caret-down" /><ych-icon v-show="tab.isShow=='1'" type="caret-up" />
        </div>
        <ActAppPortalCardList v-show="tab.isShow=='1'" :appList="tab.children" :custom="'0'" :ref="'cardList'+tab.id" @toDetail="toDetail" @refresh="refresh"></ActAppPortalCardList>
      </div>
    </div>
  </div>

</template>

<script>

  import { getAction } from '@/api/manage'
  import ActAppPortalCardList from './ActAppPortalCardList'
  import { getAppUrl } from '@/utils/hbdUtil'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'ActAppPortal',
    components: {ActAppPortalCardList},
    data () {
      return {
        loading:false,
        customAppList:[],
        groupCategory:[],
        defaultActiveKey:[],
        url: {
          allCategoryList: YchConstant.PREFIX_EFORM + '/manage/actAppGroup/getCategoryAndCustomList',
          getAppTopMenuUrl:YchConstant.PREFIX_SYSTEM + '/permission/getAppTopMenuUrl',
        },
        showCustom:true,
      }
    },
    methods: {
      loadData (name) {
        this.loading = true
        let param = {};
        if(name!=undefined && name!=''){
          param.name = name
        }
        getAction(this.url.allCategoryList, param).then(res => {
          if (res.success) {
            this.groupCategory = res.result.otherAppList
            this.groupCategory = this.groupCategory.map(item=>{
              return {
                id:item.id,
                groupName:item.groupName,
                children:item.children,
                isShow:"1"
              }
            });
            this.customAppList = res.result.customAppList
            this.defaultActiveKey = this.groupCategory.map(item=>item.id);
            this.defaultActiveKey.push("custom");
          } else {
            this.messageUtil.warning(res.message)
          }
          this.loading = false
        })
      },
      searchByName(name){
        this.loadData(name)
      },
      toDetail(item){
        let param = {
          groupId:item.id
        };
        getAction(this.url.getAppTopMenuUrl, param).then(res => {
          if (res.success) {
            let url = res.result;
            this.$router.push({ path: url }).catch(err => {})
          } else {
            this.messageUtil.warning(res.message)
          }
        })

      },
      refresh(){
        this.loadData()
      },
      changeHide(){
        if(this.showCustom){
          this.showCustom = false
        }else{
          this.showCustom = true
        }
      },
      changeGroupHide(item){
        if(item.isShow == "0"){
          item.isShow = "1"
        }else{
          item.isShow = "0"
        }
      }
    },

    created() {
      this.loadData();
    },
  }
</script>
<style lang="less" scoped>
  .process_list_title {
    padding: 8px;
    height: 24px;
    width:150px;
    /*增加部分*/
    cursor: pointer;
    overflow: hidden;
  }
  .process_list_title h4 {
    float:left;
    display: inline-block;
    height: 18px;
    line-height: 18px;
    font-size: 16px;
    vertical-align: middle;
    color: #3D4D65;
    font-weight: normal;
    margin: 0 4px;
  }

  .process_list_title i {
    float:left;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    vertical-align: bottom;
  }
</style>
